<template>
  <div>
    <a-modal v-model="modalVisible" title="商保记录" width="1000px" closable :footer="false" @cancel="onClose">
      <div v-if="target" class="mb16 flex-center">
        <span class="mr8 fs16 fw500">{{ target.empName }}</span>
        <span>{{ target.idCard }}</span>
      </div>
      <a-table :columns="columnsRecordList" :dataSource="recordLst" :pagination="false" :scroll="{ x: true }" rowKey="id" size="middle">
        <div slot="schemeName" slot-scope="text, record" style="position: relative">
          <img
            v-if="record.paymentType === '年保'"
            src="./nianbao.png"
            style="width: 45px; height: 46px; position: absolute; top: -12px; left: -8px"
          />
          {{ text }}
        </div>
        <template slot="dateRange" slot-scope="text, record">
          {{ formatDate(record.beginTime) }}-{{ formatDate(record.endTime) }}
        </template>
        <template slot="action" slot-scope="text, record">
          <a-space>
            <span class="pointer tc-theme" @click="editItem(record)">编辑</span>
            <a-popconfirm title="你确定要删除该条商保记录吗？" @confirm="deleteItem(record.id)">
              <span class="pointer tc-theme">删除</span>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-modal>
    <SelectConfirm v-model="editVisible" :target="currentItem" @confirm="editConfirm" />
  </div>
</template>
<script>
import { columnsRecordList } from "./funcs";
import SelectConfirm from "./selectConfirm.vue";
export default {
  name: "",
  components: { SelectConfirm },
  mixins: [],
  props: {
    value: {
      type: Boolean,
      default: false
    },
    target: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      columnsRecordList,
      recordLst: [],
      modalVisible: false,
      editVisible: false,
      currentItem: null
    };
  },
  computed: {},
  watch: {
    value: {
      handler(newVal) {
        this.modalVisible = newVal;
      },
      immediate: true
    },
    modalVisible() {
      this.$emit("input", this.modalVisible);
      this.$emit("change", this.modalVisible);
      if (this.modalVisible) {
        this.clear();
        this.loadData();
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    onClose() {
      this.modalVisible = false;
      this.$emit("close");
    },
    editConfirm(obj) {
      this.$request({
        url: `/insurance/api/v1/qyInsuranceRecords`,
        method: "put",
        data: {
          ...this.currentItem,
          ...obj
        }
      })
        .then((res) => {
          this.$message.success("修改成功");
          this.loadData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    editItem(record) {
      this.currentItem = record;
      setTimeout(() => {
        this.editVisible = true;
      }, 0);
    },
    deleteItem(qyInsuranceRecordId) {
      this.$request({
        url: `/insurance/api/v1/qyInsuranceRecords/${qyInsuranceRecordId}`,
        method: "delete"
      })
        .then((res) => {
          this.$message.success("删除成功");
          this.loadData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    clear() {
      this.recordLst = [];
    },
    formatDate(val) {
      if (val) {
        return this.$dayjs(val).format("YYYY-MM-DD");
      }
      return "--";
    },
    loadData() {
      this.$request({
        url: `/hr/api/v1/hrInsurance/selectEmpInsuranceList/${this.target.empId}`
      })
        .then((res) => {
          this.recordLst = res.data;
        })
        .catch((err) => {
          console.log("selectEmpInsuranceList", err);
        });
    }
  }
};
</script>
<style lang="scss"></style>
